<template>
  <div>
    <!-- 固定不动的div目录栏 -->
    <div class="dingwei" :style="didi">
      <div class="di" @click="toggleShopShow()">
        <i id="icon" class="el-icon-menu"></i>
        <h1>目录</h1>
      </div>
      <!-- 这个div是目录的内容的div -->
      <!-- 其中开启了垂直的滑轮 -->
      <div
        class="shop"
        :style="didi"
        v-show="shopShow"
        style="height: 530px; width: 620px; overflow-y: scroll"
      >
        <!-- div右上角的叉删按钮 -->
        <span class="closeicon">
          <i
            class="el-icon-error"
            style="
              font-size: 30px;
              color: #a6a6a6;
              margin-top: 10px;
              margin-right: 10px;
            "
            @click="toggleShopShow()"
          ></i>
        </span>

        <div class="a1">
          <div class="b1">&nbsp;目录</div>
        </div>
        <div class="a2">正文卷</div>
        <div class="a3">
          <ul>
            <li v-for="item in zhangjieshu" :key="item.id">
              <span @click="toChapter(item.sort)"
                >第{{ item.sort }}章 {{ item.title }}</span
              >
            </li>
          </ul>
        </div>
      </div>

      <div class="di" @click="addBook">
        <i id="icon" class="el-icon-collection"></i>
        <h1>添加</h1>
      </div>
      <div class="di" @click="mulu">
        <i id="icon" class="el-icon-notebook-2"></i>
        <h1>返回书页</h1>
      </div>
    </div>

    <!-- 固定不动的div 评论的div -->
    <!-- 提交评论的div -->
    <div class="pinluntijiao" :style="didi" v-show="yueduyes">
      <span class="closeicon">
        <i
          class="el-icon-error"
          style="
            font-size: 30px;
            color: #a6a6a6;
            margin-top: 3px;
            margin-right: 10px;
          "
          @click="yueduyesa()"
        ></i>
      </span>

      <div class="baise">
        <el-input
          type="textarea"
          :rows="rowa"
          placeholder="请输入内容"
          v-model="textarea"
          @focus="kuoda"
          id="baisedd"
        >
        </el-input>

        <el-button
          size="mini"
          type="danger"
          style="margin-left: 280px; width: 60px; height: 25px"
          @click="insterSays()"
          >发表</el-button
        >
      </div>
    </div>
    <!-- 评论显示的div -->
    <div
      class="pinlun"
      :style="bb"
      v-show="yueduyes"
      style="height: 549px; overflow-y: auto"
    >
      <!-- <span style="color: rgba(0, 0, 0, 0.4)">共1条帖子</span> -->
      <el-divider></el-divider>
      <div v-for="(pinlunItem, index) of pinglunss" :key="pinlunItem.id">
        <!-- 开始 -->
        <!-- 
  {
    "id": 8,
    "nickName": "jjj",
    "publishTime": "2022-05-19 00:19:34:000",
    "headPortraitUrl": null,
    "content": "edqwdwq"
}
 -->
        <!-- 头像信息 -->
        <!-- <el-avatar icon="el-icon-user-solid" class="touxiangdi" :src="headPortraitUrl"></el-avatar> -->
        <el-avatar
          :src="pinlunItem.headPortraitUrl"
          class="touxiangdi"
        ></el-avatar>
        <!-- 用户信息 -->
        <div class="touxiangxinxi">
          <a style="color: #3f5a93; font-size: 9px">{{
            pinlunItem.nickName
          }}</a>
          <h5 style="font-size: 9px">
            {{ pinlunItem ? pinlunItem.publishTime.substring(0, 10) : "" }}
          </h5>
        </div>
        <!-- 评论内容 -->
        <div class="pinglunxinxi">
          <span style="margin-left: 10px">{{ pinlunItem.content }}</span>
        </div>
        <div class="dianzang">
          <span style="width: 48px; height: 20px; margin-left: 10px">
            <i class="el-icon-chat-dot-round"></i>
            <el-button type="text" @click="btn1(pinlunItem.id)">回复</el-button>
          </span>
          <span style="width: 48px; height: 20px; margin-left: 10px">
            <i class="el-icon-thumb"></i>
            <el-button
              type="text"
              @click="btn2('LIKE', pinlunItem.id, pinlunItem.actionType, index)"
              >{{
                pinlunItem.actionType == "LIKE" ? "已点赞" : "点赞"
              }}</el-button
            >
          </span>
          <span style="width: 48px; height: 20px; margin-left: 10px">
            <i class="el-icon-sort-down"></i>
            <el-button
              type="text"
              @click="
                btn2('DOWNHOLE', pinlunItem.id, pinlunItem.actionType, index)
              "
              >{{
                pinlunItem.actionType == "DOWNHOLE" ? "已点踩" : "点踩"
              }}</el-button
            >
          </span>
        </div>
        <el-divider></el-divider>
        <!-- 结束 -->
      </div>
    </div>

    <!-- 子回复 -->
    <el-dialog
      title="查看回复"
      :visible.sync="huifupinglun"
      width="50%"
      class="myPicShowDialogClass"
    >
      <div class="zihuifu">
        <el-input
          placeholder="请输入内容"
          v-model="inputsss"
          clearable
          style="width: 400px"
        >
        </el-input>

        <el-button
          size="mini"
          type="danger"
          style="margin-left: 20px; width: 80px; height: 35px"
          @click="insterSayszide()"
          >发表</el-button
        >
        <h1></h1>

        <!-- 开始 -->
        <!-- 
  {
    "id": 8,
    "nickName": "jjj",
    "publishTime": "2022-05-19 00:19:34:000",
    "headPortraitUrl": null,
    "content": "edqwdwq"
}
 -->
        <div v-for="zipinglunItem of zipinglun" :key="zipinglunItem.id">
          <el-avatar
            class="touxiangdi"
            style="margin-left: 20px; margin-top: 5px"
            :src="zipinglunItem.headPortraitUrl"
          ></el-avatar>
          <div class="touxiangxinxis">
            <a style="color: #3f5a93; font-size: 9px"
              >{{ zipinglunItem.nickName }}
            </a>
            <h5 style="font-size: 9px">{{ zipinglunItem.publishTime }}</h5>
          </div>

          <div class="pinglunxinxis">
            <span style="margin-left: 10px">{{ zipinglunItem.content }}</span>
          </div>

          <el-divider></el-divider>
        </div>
        <!-- 结束 -->
      </div>
    </el-dialog>
    <!-- 回复页面的div -->
    <!-- <div class="huifupinglun" v-show="huifupinglun">
      <span class="closeicon">
        <i
          class="el-icon-error"
          style="
            font-size: 30px;
            color: #a6a6a6;
            margin-top: 3px;
            margin-right: 10px;
          "
          @click="btn1()"
        ></i>
      </span>
    </div> -->
    <!-- <div class="bianse" v-show="bianse"></div> -->

    <!-- 读书页 -->
    <div class="tou111">
      <div class="yuedu">
        <div class="yue" v-show="yue">
          <!-- <div class="yue tyw"> -->
          <div class="yueye">
            <!-- 书籍图片 -->
            <div class="imga">
              <img
                :src="shujixinxi.coverUrl"
                style="width: 120px; height: 160px"
              />
            </div>
            <!-- 书籍名 -->
            <h2>{{ shujixinxi.bookName }}</h2>
            <!-- 作者 -->
            <!-- <h1>{{ shujixinxi.writerInfoVo.nickName }}</h1> -->
            <div class="yuedudu">
              <div class="dudu">
                <h4>{{ shujixinxi.parentCatalog }}</h4>
                <br />
                <h5>类型</h5>
              </div>
              <div class="dudus">
                <h4>{{ bComputed }}</h4>
                <br />
                <h5>上架时间</h5>
              </div>
              <div class="dudus">
                <h4>
                  {{
                    shujixinxi.serialStatus == "SERIALIZE" ? "连载中" : "完本"
                  }}
                </h4>
                <br />
                <h5>连载状态</h5>
              </div>
            </div>

            <h6>本书由XXXXXX进行电子制作与发行</h6>
            <h1>©版权所有 侵权必究</h1>
          </div>
        </div>

        <!-- 阅读的页面的div -->
        <div class="yueto tyw">
          <!-- 章名 -->
          <h1 class="title">{{ this.title }}</h1>
          <p
            v-for="(txt, index) of zhangjieneirong"
            :key="index"
            @click="yueduye(index)"
            v-html="txt"
          ></p>

          <!-- <el-drawer
            title="我是标题"
            :visible.sync="drawer"
            :with-header="false"
          >
            <span>我来啦!</span> </el-drawer
          > -->
          <!-- <button @click="yueduye()">点击评论</button> -->
        </div>

        <!-- 上一章和下一章的按钮 -->
        <div class="yuesan tyw">
          <el-button class="sana" style="font-weight: bold" @click="shang()"
            >上一章</el-button
          >
          <el-button class="sans" style="font-weight: bold" @click="mulu()"
            >书籍详情</el-button
          >
          <el-button class="sans" style="font-weight: bold" @click="xia()"
            >下一章</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  muluxinxi,
  shujixinxi,
  zhangjiexinxi,
  pinglunxinxi,
  insterChaterSays,
  zipinglunxinxi,
  insterChaterSayszipin,
  giveTheThumbsUp,
  savethebrowse,
  selectChapterOrder,
  purchaseSection,
} from "@/api";
export default {
  data() {
    return {
      indexdd: "", //点击回复按钮时获取的父评论id
      inputsss: "", //子评论输入的内容
      huifupinglun: false,
      bianse: false,
      //  dangerouslyUseHTMLString: true,
      // name:"",
      drawer: false,
      // clearable:true,
      shopShow: false, //默认目录栏内容不显示
      yueduyes: false, //默认阅读页默认不显示
      yue: true, //关于上一章和下一章的点击
      bookId: this.$route.params.bookId,
      zhangjieid: "", //使用章节循序id查到的章节id
      title: "", //使用章节id查询到的章节的标题

      // chapterId: this.$route.params.chapterId,

      user: window.sessionStorage.getItem("userInfo")
        ? JSON.parse(window.sessionStorage.getItem("userInfo"))
        : null,
      textarea: "", //评论输入的内容的数据

      zhangjieshu: [], //目录的书籍的数组
      shujixinxi: "", //书籍的信息
      zhangjieneirong: "",

      pinglunss: [],
      zipinglun: [],

      //  这个是输入评论时的输入框大小变化数据
      rowa: "1",
      rowd: "4",
      rowb: "1",

      didi: { top: "130px" },
      a: { top: "130px" },
      didis: { top: "0px" },

      ee: { top: "75px" },

      bb: { top: "290px" },
      b: { top: "290px" },
      bbs: { top: "160px" },

      indexs: "",
      scroll: "", //记录滑轮滚动的数
      zhangshu: this.$route.params.chapterId, //章数的id
    };
  },
  computed: {
    bComputed() {
      return this.shujixinxi.createTime
        ? this.shujixinxi.createTime.substring(0, 10)
        : 0;
    },
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  //侦听数据变化
  watch: {
    "$route.params.chapterSort": {
      immediate: true, //初始化时让handler调用一下
      handler(val, oldVal) {
        //将所有的初始化工作放到此处，可以避免url改变但组件重新加载的不便
        console.log("路由参数被修改", val, oldVal);

        this.get();
        this.set();
        this.det();
        this.jianting();
      },
    },
  },
  created() {},

  methods: {
    addBook() {},
    clP(i) {
      alert(i + 1);
    },
    //监听
    jianting() {
      if (this.$route.params.chapterSort > 1) {
        this.yue = false;
        window.scrollTo(0, 0);
      }
      this.shopShow = false;
      this.yueduyes = false;
      this.zhangjieneirong = "";
    },
    // 获取书籍的方法
    get() {
      console.log(1);
      shujixinxi(this.bookId).then(({ data }) => {
        this.shujixinxi = data.data;
        // console.log(this.shujixinxi);
      });
    },
    //获取章节
    set() {
      console.log("data");
      if (window.sessionStorage.getItem("userInfo")) {
        selectChapterOrder(this.bookId, this.$route.params.chapterSort)
          .then(({ data }) => {
            if (data.code == 0 && data.data) {
              if (data.data.purchase == null) {
                //免费章节
                this.parseData(data);
              } else if (data.data.purchase == false) {
                //未购买
                this.parseData(data, 10);
                this.$confirm("是否要购买当前章节?", "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                })
                  .then((result) => {
                    console.log("确定");
                    purchaseSection(this.bookId, this.$route.params.chapterSort)
                      .then(({ data }) => {
                        if (data.code == 600) {
                          console.log("您的余额不足");
                          this.$confirm("您的余额不足, 是否前往充值?", "提示", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning",
                          });
                        }
                      })
                      .catch((err) => {});
                  })
                  .catch((err) => {
                    console.log("取消");
                  });
              } else if (data.data.purchase) {
                //已购买
                this.parseData(data);
              }
            } else if (data.code == 600) {
              //余额不足
              this.$confirm("您的余额不足, 是否前往充值?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              });
              this.parseData(data, 10);
            }
          })
          .catch((err) => {});
      } else {
        zhangjiexinxi(this.bookId, this.$route.params.chapterSort).then(
          ({ data }) => {
            console.log(data, "章节内容");
            if (data.code == 0) {
              if (data.data.purchase == null) {
                //免费章节
                this.parseData(data);
              } else if (data.data.purchase == false) {
                //未购买
                this.parseData(data, 10);
                this.$confirm("当前章节需要购买，是否要前往登录?", "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                })
                  .then((result) => {
                    console.log("确定");
                    this.$router.push({ path: "/" });
                  })
                  .catch((err) => {
                    console.log("取消");
                  });
                //登录后查询详情
              }
            } else {
            }
          }
        );
      }
    },
    //data 数据， length显示几行数据
    parseData(data, length) {
      console.log("获取章节--------------");
      let str = data.data.chapterconten;
      this.zhangjieid = data.data.id;
      this.title = data.data.title;
      let arrStr = str.split("</p>");
      if (!length) {
        length = arrStr.length;
      }
      let arr = [];
      for (let i = 0; i < length; i++) {
        arr[i] = arrStr[i].replace("<p>", "");
      }
      this.zhangjieneirong = arr;
    },
    toggleShopShow() {
      this.shopShow = !this.shopShow; //使false变为true显示
      muluxinxi(this.bookId).then(({ data }) => {
        this.zhangjieshu = data.data;
        console.log(this.zhangjieshu, "--------------查询章节信息");
      });
    },

    //回复
    btn1(indexd) {
      //查询
      zipinglunxinxi(this.zhangjieid, indexd).then(({ data }) => {
        this.indexdd = indexd;
        this.zipinglun = data.data;

        console.log(this.zipinglun, "ziiziziziiziziziziizi");
      });

      //打开对话框
      this.huifupinglun = !this.huifupinglun;
    },

    // 点赞和取消点赞的方法
    btn2(actionType, id, type, index) {
      if (type == "CANCEL") {
        giveTheThumbsUp(actionType, id, type).then(({ data }) => {
          console.log(type, id, data, "成功");
          let a = this.pinglunss[index];
          a.actionType = actionType;
          this.pinglunss.splice(index, 1, a);
        });
      } else {
        giveTheThumbsUp("CANCEL", id, type).then(({ data }) => {
          console.log(type, id, data, "取消成功");
          let a = this.pinglunss[index];
          a.actionType = "CANCEL";
          this.pinglunss.splice(index, 1, a);
        });
      }
    },

    yueduye(index) {
      this.yueduyes = true;
      this.indexs = index;
      console.log(this.indexs, "indexs///////////");
      // 父回复
      pinglunxinxi(this.zhangjieid, index).then(({ data }) => {
        this.pinglunss = data.data;

        console.log(this.pinglunss, "//////////评论的用户");
      });

      // this.yueduyes = true; //使false变为true显示
      // this.rowa = this.rowb;
    },
    // 父评论发表的点击事件
    insterSays() {
      this.clearable = true;
      console.log("评论-----");
      insterChaterSays(this.indexs, this.zhangjieid, this.textarea).then(
        ({ data }) => {
          console.log(data, "评论成功。。。。。。。。。。。。。");
          let p = data.data;
          this.pinglunss.push({
            id: p.id,
            content: p.content,
            headPortraitUrl: this.user.headPortraitUrl,
            nickName: this.user.nickName,
            publishTime: p.publishTime,
          });
        }
      );
      this.textarea = "";

      this.rowa = this.rowb;
    },
    // 保存子评论的信息
    insterSayszide() {
      insterChaterSayszipin(this.indexdd, this.zhangjieid, this.inputsss).then(
        ({ data }) => {
          console.log(data, "评论成功。。。。。。。。。。。。。");
          let d = data.data;
          this.zipinglun.push({
            id: d.id,
            content: d.content,
            headPortraitUrl: this.user.headPortraitUrl,
            nickName: this.user.nickName,
            publishTime: d.publishTime,
          });
          // this.
        }
      );
    },

    yueduyesa() {
      this.yueduyes = false; //使false变为true显示
      this.rowa = this.rowb;
    },
    handleScroll() {
      this.scroll =
        document.documentElement.scrollTop || document.body.scrollTop;

      if (this.scroll > 60) {
        this.didi = this.didis;
        this.bb = this.bbs;
      } else {
        this.didi = this.a;
        this.bb = this.b;
      }
    },

    // 点击输入评论的框变大
    kuoda() {
      this.rowa = this.rowd;
      console.log(this.rowa);
    },

    // 章节的事件
    det() {
      if (this.zhangshu > 1) {
        this.yue = false;
        window.scrollTo(0, 0);
        console.log(this.zhangshu);
      } else if ((this.zhangshu = 1)) {
        this.yue = true;
        window.scrollTo(0, 0);
        console.log(this.zhangshu);
      } else if (this.zhangshu < 1) {
        this.zhangshu = 1;
        this.yue = true;
        window.scrollTo(0, 0);
        console.log(this.zhangshu);
      }
    },
    // 下一章的点击事件
    xia() {
      //注意由于路由路径没有发生变化，而路由参数发生变化，vue会默认复用组件，不会重新加载组件
      this.$store.commit("routeJump/updateToChapterAction", {
        chapterSort: Number(this.$route.params.chapterSort) + 1,
      });

      console.log("yueyueyueyueyue------", this.yue);
    },
    // 上一章的点击事件
    shang() {
      let id = this.$route.params.chapterSort;
      if (id >= 2) {
        this.$store.commit("routeJump/updateToChapterAction", {
          chapterSort: Number(id) - 1,
        });
      }
    },

    // 点击目录的方法
    mulu() {
      this.$router.push(`/book/${this.$route.params.bookId}`);
    },
    toChapter(sort) {
      this.$store.commit("routeJump/updateToChapterAction", {
        chapterSort: Number(sort),
      });
    },
  },

  //销毁,否则跳到别的路由还是会出现
  // destroyed() {
  //   console.log(",,,,销毁,,,,,我离开了");

  //   savethebrowse(this.zhangjieid, this.bookId).then(({ data }) => {});

  //   window.removeEventListener("scroll", this.handleScroll);
  // },
  // deactivated() {
  //   console.log(",,,,,失活,,,,我离开了");

  //   savethebrowse(this.zhangjieid, this.bookId).then(({ data }) => {});
  //   window.removeEventListener("scroll", this.handleScroll);
  // },
  beforeRouteLeave(to, from, next) {
    console.log(",,,,,离开,,,,我离开了");
    savethebrowse(this.zhangjieid, this.bookId).then(({ data }) => {});
    window.removeEventListener("scroll", this.handleScroll);
    next();
  },
};
</script>


<style scoped>
* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
.a {
  width: 620px;
  height: 502px;
  /* border:1px solid black; */
  background-color: #f8f1da;
  /* overflow-y: auto; */
}
.a1 {
  width: 400px;
  height: 30px;
  float: left;
  margin-left: 15px;
  margin-top: 20px;
}
.b1 {
  width: 40px;
  height: 25px;
  border-bottom: 1px solid #ef5266;
  font-weight: bolder;
  color: #ef5266;
}
.a2 {
  width: 605px;
  height: 33px;
  border-bottom: 1px solid #e2e0dc;
  float: left;
  margin-left: 15px;
  margin-top: 20px;
  font-size: 18px;
  font-weight: bolder;
}
.a3 {
  width: 605px;
  height: 390px;
  float: left;
  margin-left: 15px;
}
.a3 li {
  height: 29px;
  width: 300px;
  float: left;
  padding-top: 8px;
  border-bottom: 1px solid #f2f2f2;
}
.a3 a {
  color: #000000;
}
.a3 a:hover {
  text-decoration: none;
  color: #ff0000;
}
.tou111 {
  /* width: 100%; */
  /* height: 4000px; */
  background-color: #ddcc9f;
}
.bianse {
  /* display: none; */
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: 0.5;
  filter: alpha(opacity=88);
}
.touxiangdi {
  width: 44px;
  height: 44px;
  margin-left: 10px;
  float: left;
}
.huifupinglun {
  position: fixed;
  width: 800px;
  height: 500px;
  left: 400px;
  top: 100px;

  background-color: #f2e8c5;
}

.yuedu {
  width: 1000px;
  /* height: 2000px; */
  border: 1px solid #ddcc9f;
  /* border: 1px solid #fefefd;
  margin: auto; */
  margin-left: 420px;
}

.closeicon {
  float: right;
  cursor: pointer;
}

.myPicShowDialogClass.el-dialog__header {
  background-color: #f2e8c5;
}

.myPicShowDialogClass.el-dialog__body {
  background-color: #f2e8c5;
}

.zihuifu {
  width: 700px;
  height: 500px;
  background-color: #f2e8c5;
  border: 1px solid #ddcc9f;
}
.baise {
  width: 360px;
  height: 130px;
  margin-top: 35px;
  background-color: white;
  border: 1px solid #d8d8d8;
}
.yue {
  width: 622px;
  /* height: 660px; */
  margin-top: 50px;
  background-color: #f5ebc9;
  border: 1px solid #d8d8d8;
}
.yueye {
  width: 602px;
  height: 640px;
  margin-top: 10px;
  margin-left: 10px;

  background-color: #f5ebc9;
  border: 1px solid #d8d8d8;
}
#baisedd {
  border: 1px solid white;
}
.imga {
  width: 120px;
  height: 160px;
  margin-top: 80px;
  margin-left: 240px;
  background-color: #f5ebc9;
  border: 4px solid #f4f4f4;
}
.yuedudu {
  width: 380px;
  height: 48px;
  text-align: center;
  margin-top: 100px;
  margin-left: 100px;
  /* border: 1px solid #d8d8d8; */
}
.dudu {
  width: 123px;
  height: 48px;
  text-align: center;
  /* border: 1px solid #D8D8D8; */
  float: left;
}
.dudus {
  width: 125px;
  height: 48px;
  text-align: center;
  /* border: 1px solid #D8D8D8; */
  float: left;
}
.touxiangxinxi {
  width: 239px;
  height: 39px;
  margin-left: 70px;
  /* border: 1px solid #d8d8d8; */
}
.touxiangxinxis {
  width: 239px;
  height: 39px;
  margin-left: 85px;
  margin-top: 10px;
  /* border: 1px solid #d8d8d8; */
}
.pinglunxinxi {
  width: 100%;
  height: 39px;
  margin-top: 10px;
  /* border: 1px solid #d8d8d8; */
}
.pinglunxinxis {
  width: 100%;
  height: 39px;
  margin-top: 10px;
  margin-left: 18px;
  /* border: 1px solid #d8d8d8; */
}
.dianzang {
  width: 100%;
  height: 28px;

  /* border: 1px solid #d8d8d8; */
}
h2 {
  font-size: 24px;
  margin-top: 40px;
  text-align: center;
}
h1 {
  /* font-size: 24px; */
  color: rgba(0, 0, 0, 0.4);
  margin-top: 10px;
  text-align: center;
}
h6 {
  font-size: 15;
  margin-top: 40px;
  text-align: center;
  color: #666666;
}

.yueto {
  width: 622px;
  /* height: 2660px; */
  margin-top: 50px;
  background-color: #f5ebc9;
  border: 1px solid #e5e5e5;
}
.yuesan {
  width: 622px;
  height: 100px;
  margin-top: 50px;
  background-color: #f5ebc9;
  border: 1px solid #e5e5e5;
}
.sana {
  width: 205px;
  height: 100px;
  background-color: #f5ebc9;
  border: 1px solid #e5e5e5;
  float: left;
}
.sans {
  width: 190px;
  height: 100px;

  background-color: #f5ebc9;
  border: 1px solid #e5e5e5;
  float: left;
}
.sanss {
  width: 205px;
  height: 99px;
  margin-left: 410px;
  background-color: #f5ebc9;
  border: 1px solid #e5e5e5;
}
.dingwei {
  position: fixed;
  width: 75px;
  height: 249px;
  left: 340px;
  /* top: 130px; */
  background-color: #f5ebc9;
  border: 1px solid #dad0b4;
}

.pinlun {
  position: fixed;
  width: 360px;
  height: 549px;
  left: 1065px;
  /* top: 130px; */
  background-color: #f5ebc9;
  border: 1px solid #dad0b4;
}
.pinluntijiao {
  position: fixed;
  width: 360px;
  height: 170px;
  left: 1065px;
  /* top: 130px; */
  background-color: #f5ebc9;
  border: 1px solid #dad0b4;
}
.shop {
  position: fixed;
  width: 620px;
  height: 530px;
  left: 440px;
  /* top: 130px; */
  background-color: #f8f1da;
  border: 1px solid #e5e5e5;
}
.di {
  width: 75px;
  height: 82px;
  border-bottom: 1px solid #dad0b4;
  text-align: center;
}
#icon {
  margin-top: 10px;
  font-size: 30px;
}
.el-dialog {
  background: red;
}
/* 新增 */
.tyw {
  /* width: 800px; */
}
p {
  word-wrap: break-word;
  word-break: break-all;
  line-height: 1.8;
  overflow: hidden;
  margin: 0.8em 0;
  font-size: 18px;
}
.title {
  font-size: 20px;
}
</style>


